<template>
  <div v-if="historyAndHot">
    <van-sticky>
      <div v-if="currentState === 'productlist'">
        <NavBar @left-click-event="goBack" title="分类"></NavBar>
      </div>
      <div class="search-con padding-lr-20">
        <SearchInput @content-change-event="searchGoodsList" @clear-event="clearInputEvetn"
          @do-cancel-event="cancelSearch" :show-action="true"></SearchInput>
      </div>
    </van-sticky>

    <template v-if="currentState === 'default'">
      <div v-if="historyAndHot.historyData && historyAndHot.historyData.length > 0">
        <h1>历史记录</h1>
        <ul>
          <li v-for="item in historyAndHot.historyData" :key="item.keyword">{{ item.keyword }}</li>
        </ul>
        <van-icon name="delete"></van-icon>
      </div>
      <h1>热门搜索</h1>
      <ul>
        <li v-for="item in historyAndHot.hotKeywordList" :key="item.keyword">{{ item.keyword }}</li>
      </ul>
    </template>
    <template v-else-if="currentState === 'list'">
      <ul>
        <li @click="addDatabase(item.name)" v-for="item in goodsList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </template>
    <template v-else>
      <van-sticky :offset-top="75">
        <MyTabbar @tabbar-change-event="searchGoodsProductList"></MyTabbar>
      </van-sticky>
    
      <div class="com-container">
        <ProductList :list="goodsProductList"></ProductList>
      </div>
    </template>
  </div>
</template>
<script setup>
import {
  indexaction as indexactionApi,
  helperaction as helperactionApi,
  addhistoryaction as addhistoryactionApi
} from '@/api/home/search'
import { onMounted, reactive, ref } from 'vue';
import SearchInput from '../../../components/SearchInput.vue';
import MyTabbar from '../../../components/MyTabbar.vue';
import ProductList from '../../../components/ProductList.vue';
import NavBar from '../../../components/NavBar.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let historyAndHot = ref({})
const currentState = ref('default') // default list productlist
const goodsList = ref([]) // 搜索列表
const goodsProductList = ref([]) // 搜索列表
const keyword = ref('') // 搜索的商品名称
onMounted(async () => {
  const res = await indexactionApi({ openId: localStorage.getItem('openId') })
  historyAndHot.value = res


})

const goBack = () => {
  router.go(-1)
}

const cancelSearch = () => {
  router.go(-1)
}
const clearInputEvetn = () => {
  router.go(-1)
}

const searchGoodsList = async (params) => {
  if (params === '') {
    // 修改展示状态
    currentState.value = 'default'
    return
  }
  keyword.value = params
  const res = await helperactionApi({ keyword: params })
  goodsList.value = res.keywords
  // 修改展示状态
  currentState.value = 'list'
}
const searchGoodsProductList = async (order) => {
  let orderParams = 'default'
  if (order === 'up') {
    orderParams = 'asc'
  } else if (order === 'down') {
    orderParams = 'desc'
  }
  const res = await helperactionApi({keyword:keyword.value,order:orderParams})
  // const res = await helperactionApi({ keyword: 1, order: orderParams })
  goodsProductList.value = res.keywords

}



// 添加到数据库
const addDatabase = async (params) => {
  keyword.value = params
  const res = await addhistoryactionApi({ keyword: params, openId: localStorage.getItem('openId') })
  if (res.data === 'success' || res.data === '已经有记录了') {
    //  // 修改展示状态
    currentState.value = 'productlist'
    // 
    searchGoodsProductList('default')
  }

}








</script>
<style lang="scss" scoped>
.search-con {
  background-color: #fff;
}

.com-container {
  margin-top: 19px;
}
</style>